<template>
  <div style="width: 100%;  overflow: hidden; position: relative;" v-bind:style="bodyStyle">
    <div :id="vrId" style="width: 100%;  height: 100%;" >
    </div>
    <div class="uni-heng"></div>
    <div class="uni-shu"></div>
  </div>
</template>

<script>
  import * as HMAP from './hmap.manage.js'
  export default {
    props: {
      type: String,
      bodyStyle:  {
        type: Object,
        default: () => {
          return {
            height: '400px'
          }
        }
      }
    },
    data () {
      return {
        vrId: 'vranglecheck_' + Math.random().toString(36).substr(2),
        vrManager: null,
        meshAngle: 0,
        vrAngle: 0
      }
    },
    beforeDestroy () {
      if (this.vrManager) {
        this.vrManager.destroy()
        this.vrManager = null
      }
    },
    mounted() {
      this.vrManager = new HMAP.JfVR( this.vrId, {
      	showaxes: true,
      	effectiveDistance: 10, 	// 现实距离30米内，认为有效，可展示VR地图
      	cameraHeight: 1.334,    // 摄像机拍摄的高度，1.125米
      	path: {
      		url: "https://xcfiles.oss-cn-shanghai.aliyuncs.com/szgt/img/vrblue_path.png", //路线图片
      		width: 1.8, //路宽
      	},
      	scaleMap: {
      		'': 39.37 //比例尺为 1：1000（米） 地图距离：实际距离  104.67:6.6
      	}
      });
      this.vrManager.on("onOffsetAngle", (e)=>{
        this.vrAngle = e.detail;
        this.offsetAngle();
      })
    },
    methods: {
      showVr (imgUrl, angle) {
        this.vrAngle = angle+this.meshAngle;
        this.$nextTick(()=>{
          this.vrManager.showVrImg(imgUrl, angle)
          this.vrManager.rotateVr(this.meshAngle)
        })
        this.offsetAngle();
        this.vrManager.resize();
      },
      rotateVr(angle) {
        this.meshAngle = angle;
        this.vrManager.rotateVr(angle)
        this.offsetAngle();
      },
      smoothAngle(val) {
      	var angle = val % 360;
      	if(angle < 0) {
      		return this.toFixed(angle+360)
      	}
      	return this.toFixed(angle)
      },
      offsetAngle() {
        this.$emit("onOffsetAngle", this.smoothAngle(this.vrAngle-this.meshAngle))
      }
    }
  }
</script>
<style scoped="scoped">
  .uni-heng {
    width: 100%;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    background-color: #ff0000;
  }
  .uni-shu {
    width: 1px;
    height: 100%;
    position: absolute;
    left: 50%;
    z-index: 10;
    top: 0;
    background-color: #ff0000;
  }
</style>
